import React, { useEffect, useState } from 'react'
import { Card, Col, List, Row, Descriptions } from 'antd'
import _ from 'lodash'
import { getNewsListApi } from '@/api/news'

function News() {
  const [list, setList] = useState([])

  useEffect(() => {
    getNewsListApi({
      publishState: 2,
      '_expand': 'category'
    }).then(res => {
      setList(Object.entries((_.groupBy(res, item => item.category.title))))
    })
  }, [])

  return (
    <div style={{
      width: '95%',
      margin: '0 auto'
    }}>
      <Descriptions style={{ paddingTop: '20px' }} title="全球大新闻" />
      <div className="site-card-wrapper">
        <Row gutter={[16, 16]}>
          {
            list.map(item => {
              return (<Col key={item[0]} span={8}>
                <Card bordered hoverable title={item[0]}>
                  <List
                    dataSource={item[1]}
                    pagination={{ pageSize: 3 }}
                    renderItem={data => (
                      <List.Item>
                        <a href={`#/detail/${data.id}`}>{data.title}</a>
                      </List.Item>
                    )}
                    size="small"
                  />
                </Card>
              </Col>)
            })
          }
        </Row>
      </div>
    </div>
  )
}

export default News